<template>
  <div
    @click="toAlbum(index)"
    class="newAlbumPage"
    v-for="(item2, index) in NEW"
    :key="index"
  >
    <div class="newAlbum_pic">
      <img :src="item2.cover" style="width: 178px; height: 178px" alt="" />
    </div>
    <div class="newAlbum_name">{{ item2.name }}</div>
    <div class="newAlbum_info">{{ item2.description }}</div>
    <div class="viewAcomment">
      <div>
        <img
          src="../../assets/play_cnt.png"
          style="width: 25px; height: 25px"
          alt=""
        />
        <span>{{ item2.fans }}</span>
        <!-- 收藏 -->
      </div>
      &nbsp; &nbsp;
      <div>
        <img
          src="../../assets/evaluate.png"
          style="width: 25px; height: 25px"
          alt=""
        />
        <span>{{ item2.comments }}</span>
        <!-- 评论 -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: "",
  props: {
    NEW: Array,
  },
  methods: {
    toAlbum(index){
      this.$router.push({
        path:"/album_info",
        query:{
          id:this.$parent.NEWalbum[index].id,
          flag:1,//标记为专辑
        }
      })
    }
  },
};
</script>
<style scoped>
.newAlbumPage {
  display: flex;
  flex-direction: column;
  width: 178px;
  height: 270px;
  background: #21262c;
  border-radius: 5px;
  padding: 15px 11px;
  margin: 18px 0;
  transition: all 0.3s;
}
.newAlbumPage:hover{
  cursor: pointer;
  transform: scale(1.02);
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2);
}
.NEWalbum:hover{
  cursor: pointer;
}
.newAlbum_pic {
  width: 178px;
  height: 178px;
  border-radius: 50%;
  overflow: hidden;
}
.newAlbum_name {
  height: 18px;
  margin-top: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.newAlbum_info {
  height: 16px;
  margin: 2px 0 12px;
  line-height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.viewAcomment {
  display: flex;
}
.viewAcomment div {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
}
</style>
